<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入Echearts-js文件 -->
    <script src="js/echarts.min.js"></script>
    <!-- 引入动画js文件 -->
    <script src="js/animate.js"></script>
    <!-- 引入js文件 -->
    <script src="js/index.js"></script>
</head>

<body>
    <!-- 头部部分-start -->
    <header class="header">
        <div class="w">
            <div class="logo">
                <p>L O G O</p>
            </div>
            <div class="logout">
                <p>Log Out</p>
            </div>
        </div>
    </header>
    <!-- 头部部分-end -->

    <!-- 主体部分-start -->
    <div class="banner">
        <!-- nav部分 -->
        <nav class="nav w">
            <div class="title">
                <em>Audience Overview</em>
                <p>Roseville, CA</p>
            </div>
            <div class="liftnav">
                <ul>
                    <li><a href="javascript:;">Dashboard</a></li>
                    <li><a href="javascript:;">Projects</a></li>
                    <li><a href="javascript:;">Calendar </a></li>
                    <li><a href="javascript:;">Mailbox</a></li>
                    <li><a href="javascript:;">Settings</a></li>
                </ul>
            </div>
        </nav>
        <!-- focus焦点图record记录 -->
        <div class="w">
            <div class="banner-bd">
                <div class="focus">
                    <!-- 滚动区域 -->
                    <ul>
                        <li>
                            <a href="javascript"><img src="images/focus1.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript"><img src="images/focus2.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript"><img src="images/focus3.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript"><img src="images/focus4.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript"><img src="images/focus5.jpg" alt=""></a>
                        </li>

                    </ul>
                    <!-- 左侧按钮 -->
                    <a href="javascript:;" class="arrow-l"></a>
                    <!-- 右侧按钮 -->
                    <a href="javascript:;" class="arrow-r"></a>
                    <!-- 滚动点 -->
                    <ol class="circle">

                    </ol>
                </div>
                <div class="record">
                    <div class="record-hd">
                        <h3>Support Requests</h3>
                        <button>View All</button>
                    </div>
                    <div class="item">
                        <dl>
                            <dt>TIME</dt>
                            <dd>9:45pm</dd>
                            <dd>9:45pm</dd>
                        </dl>
                        <dl>
                            <dt>USER NAME</dt>
                            <dd>info@design.com</dd>
                            <dd>info@design.com</dd>
                        </dl>
                        <dl>
                            <dt>STATUS</dt>
                            <dd><button>Solved</button></dd>
                            <dd><button>Solved</button></dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="chart1">
                1
            </div>
            <div class="chart2">
                2
            </div>
            <div class="chart3">
                3
            </div>
        </div>
        <!-- echart图表 -->
    </div>

    <!-- 主体部分-end -->

    <!-- 尾部部分-start -->
    <footer class="footer">
        <div class="w">
            <div class="logo logofooter">
                <p>L O G O</p>
            </div>
            <div class="list">
                <ul>
                    <li><a href="javascript:;">NEWS</a></li>
                    <li><a href="javascript:;">CHANNELS</a></li>
                    <li><a href="javascript:;">OVERVIEW</a></li>
                    <li><a href="javascript:;">TIMELINE</a></li>
                </ul>
                <ul>
                    <li><a href="javascript:;">SPORT</a></li>
                    <li><a href="javascript:;">CULTURE</a></li>
                    <li><a href="javascript:;">NATURE</a></li>
                    <li><a href="javascript:;">MUSIC</a></li>
                </ul>
                <ul>
                    <li><a href="javascript:;">WEATHER</a></li>
                    <li><a href="javascript:;">AUTOS</a></li>
                    <li><a href="javascript:;">LOCAL</a></li>
                    <li><a href="javascript:;">SHOP</a></li>
                </ul>
                <ul>
                    <li><a href="javascript:;">FUTURE</a></li>
                    <li><a href="javascript:;">FOOD</a></li>
                    <li><a href="javascript:;">EARTH</a></li>
                    <li><a href="javascript:;">TV</a></li>
                </ul>
                <ul>
                    <li><a href="javascript:;">TRAVEL</a></li>
                    <li><a href="javascript:;">RADIO</a></li>
                </ul>
            </div>
        </div>
        <div class="black">

        </div>
    </footer>
    <!-- 尾部部分-end -->

</body>

</html>